<template>
	<TransitionGroup class="relative" tag="div" :name="tgClass">
		<div v-for="item in items" class="h-[18px] leading-[18px]" :key="item">
			{{ item || '0' }}
		</div>
	</TransitionGroup>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
	value: {
		type: [Number, String],
		default: '0'
	},
	trend: {
		type: String,
		default: ''
	}
})

const items = ref([props.value])

const tgClass = ref('')

watch(
	() => [props.trend, props.value],
	(curr, prev) => {
		if (props.trend === 'up' || (curr[1] && (!prev[1] || +curr[1] > +prev[1]))) {
			tgClass.value = 'listup'
		} else if (props.trend === 'down' || (prev[1] && (!curr[1] || +curr[1] < +prev[1]))) {
			tgClass.value = 'listdown'
		}
		if (items.value.length) {
			items.value.pop()
		}
		items.value.push(props.value)
	}
)
</script>

<style lang="scss" scoped>
$item-height: 18px;

.listup-leave-active,
.listdown-leave-active {
	position: absolute;
}

.listup-move, /* 对移动中的元素应用的过渡 */
.listup-enter-active,
.listup-leave-active,
.listdown-move, 
.listdown-enter-active,
.listdown-leave-active {
	transition: all 0.5s ease;
}

.listup-enter-from {
	opacity: 0;
	transform: translateY($item-height);
}
.listup-leave-to {
	opacity: 0;
	transform: translateY(-$item-height);
}

.listdown-enter-from {
	opacity: 0;
	transform: translateY(-$item-height);
}
.listdown-leave-to {
	opacity: 0;
	transform: translateY($item-height);
}
</style>
